import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

// Element Plus - On-demand Import
import {
  ElButton,
  ElCard,
  ElContainer,
  ElHeader,
  ElAside,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElSubMenu,
  ElIcon,
  ElForm,
  ElFormItem,
  ElInput,
  ElDatePicker,
  ElRow,
  ElCol,
  ElTag,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElEmpty,
  ElMessage,
  ElMessageBox,
  ElLoading,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElDialog,
  ElCheckbox,
  ElRadio,
  ElRadioGroup,
  ElSelect,
  ElOption,
  ElUpload,
  ElProgress,
  ElSteps,
  ElStep,
  ElTooltip,
  ElSwitch,
  ElBadge,
  ElDivider,
  ElAlert,
  ElTabs,
  ElTabPane,
  ElSlider
} from 'element-plus'
import 'element-plus/dist/index.css'

// Element Plus Icons
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

// Register Element Plus components
const components = [
  ElButton,
  ElCard,
  ElContainer,
  ElHeader,
  ElAside,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElSubMenu,
  ElIcon,
  ElForm,
  ElFormItem,
  ElInput,
  ElDatePicker,
  ElRow,
  ElCol,
  ElTag,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElEmpty,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElDialog,
  ElCheckbox,
  ElRadio,
  ElRadioGroup,
  ElSelect,
  ElOption,
  ElUpload,
  ElProgress,
  ElSteps,
  ElStep,
  ElTooltip,
  ElSwitch,
  ElBadge,
  ElDivider,
  ElAlert,
  ElTabs,
  ElTabPane,
  ElSlider
]

components.forEach(component => {
  app.component(component.name, component)
})

// Register Element Plus Icons
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// Install plugins globally
app.config.globalProperties.$message = ElMessage
app.config.globalProperties.$msgbox = ElMessageBox
app.config.globalProperties.$loading = ElLoading.service

// Register loading directive
app.directive('loading', ElLoading.directive)

app.use(createPinia())
app.use(router)
app.mount('#app')
